/**
 * @description 此组件为折线
 * @example
 * {idName： bar,
 *  xAxis: ['星期一', '星期二'],
 *  data: [
 *  {label: 'legend1', value:[{key: '星期一', value: 20},{key: '星期二', value: 20}]},
 * {label: 'legend2', value:[{key: '星期一', value: 20},{key: '星期二', value: 20}]}，
 * ]
 * }
 * @author gf
 * @todo 在不影响已有功能的情况下可增加props
 */

import { useEffect } from 'react'
import * as echarts from 'echarts'
import {
  axisLabelStyle,
  axisLineStyle,
  splitLineStyle,
  TOOLTIP_FONT_SIZE,
  yaxisLabelStyle,
  yaxisLineStyle,
} from '@/utils/echarts'
import useIoObserve from '@/hook/useIoObserve'
import * as _ from 'lodash'

interface VProps {
  key: string // 与x轴对应的值
  value: number // y轴对应的值
}

export interface DataProps {
  label: string // legend对应的中文
  value: VProps[]
}

export interface StackBarProps {
  idName: string // 每一个echarts图需要一个dom来创建实例，该id用来标识唯一dom
  xAxis: string[] // x轴为字符串数组
  legend: string[]
  data: DataProps[]
  color?: string[]
  isStack?: boolean // 是否堆叠
  percent?: boolean
  legendStyle?:Object;
  gridStyle?:Object;
  seriesStyles?:Object;
  propsAxisLabelStyle?:Object;
}

const StackBar = (props: StackBarProps) => {
  const { idName, xAxis, data, legend, color, isStack = true, percent,legendStyle,gridStyle,seriesStyles,propsAxisLabelStyle } = props

  const handleMultiLineData = (arr: any, str?: string) => {
    let res: any = []
    arr.map((v) => {
      res.push([v.key, v.value])
    })
    // console.log('res****************',res, str);
    return res
  }

  const options = {
    color,
    tooltip: {
      trigger: 'axis',
      zIndex: 2,
      backgroundColor: "rgba(65,69,81,0.96)",
      extraCssText: "border-radius:2px",
      borderWidth: 0,
      textStyle: {
        fontSize: TOOLTIP_FONT_SIZE,
        color: '#fff',
        lineHeight:'28px'
      },
      valueFormatter: (value) => {
        return (_.isNumber(value) ? value : '-') + (percent && _.isNumber(value) ? '%' : '')
      }
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLabel: {
        ...axisLabelStyle(),
        rotate: 30,
        fontSize: 8,
        ...propsAxisLabelStyle,
      },
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLine: {
        ...axisLineStyle(),
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      ...yaxisLineStyle(),
      axisLine: {
        ...yaxisLineStyle(),
        show: true,
      },
      axisLabel: {
        ...yaxisLabelStyle(percent ? '%' : '', 0),
        inside: false,
        padding: [15, 0, 0, 0],
        fontSize: 8,
      },
      ...splitLineStyle(),
    },
    grid: {
      left: 10,
      right: 20,
      bottom: -6,
      top: 38,
      containLabel: true,
      ...gridStyle
    },
    legend: {
      data: legend,
      icon: 'rectangle',
      itemWidth: 11,
      itemHeight: 11,
      itemGap: 20,
      top: 5,
      textStyle: {
        fontSize: 10,
        color: '#35425e',
        width: 48,
        height: 28,
        lineHeight: 28,
        padding: [0, 0, -3, 2],
      },
      ...legendStyle
    },
    series: data?.map((v) => {
      return {
        name: v.label,
        data: handleMultiLineData(v.value),
        type: 'bar',
        barMaxWidth: isStack ? 16 : 10,
        stack: isStack,
        ...seriesStyles,
      }
    }),
  }

  const handleGenBar = () => {
    const dom = document.getElementById(idName)
    if (dom) {
      const myChart = echarts.init(dom)
      myChart.setOption(options)
    }
  }

  // 窗口大小改变
  const handleChangeSize = () => {
    setTimeout(() => {
      const dom = document.getElementById(idName)
      dom?.removeAttribute('_echarts_instance_')
      handleGenBar()
    }, 1)
  }

  useIoObserve(null, handleChangeSize, idName)

  useEffect(() => {
    handleGenBar()
    window.addEventListener('resize', handleChangeSize)
    return () => {
      const dom = document.getElementById(idName)
      dom?.removeAttribute('_echarts_instance_')
      window.removeEventListener('resize', handleChangeSize)
    }
  }, [data])

  return (
    <div
      id={idName}
      style={{ width: '100%', height: '100%' }}
      onClick={(e) => {
        e.stopPropagation()
      }}
    ></div>
  )
}

export default StackBar
